<template>
  <view class="page">
    <scroll-view class="content" scroll-y>
      <view class="form-container">
        <view class="form-item">
          <text class="label">姓名<text class="required">*</text></text>
          <input
            v-model="formData.name"
            class="input"
            type="text"
            placeholder="请输入姓名"
            @blur="validateName"
          />
          <text v-if="errors.name" class="error-text">{{ errors.name }}</text>
        </view>
        <view class="form-item">
          <text class="label">手机号<text class="required">*</text></text>
          <input
            v-model="formData.phone"
            class="input"
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            @blur="validatePhone"
          />
          <text v-if="errors.phone" class="error-text">{{ errors.phone }}</text>
        </view>
        <view class="form-item">
          <text class="label">邮箱<text class="required">*</text></text>
          <input
            v-model="formData.email"
            class="input"
            type="text"
            placeholder="请输入邮箱"
            @blur="validateEmail"
          />
          <text v-if="errors.email" class="error-text">{{ errors.email }}</text>
        </view>
        <view class="form-item">
          <text class="label">年龄<text class="required">*</text></text>
          <input
            v-model="formData.age"
            class="input"
            type="number"
            placeholder="请输入年龄"
            @blur="validateAge"
          />
          <text v-if="errors.age" class="error-text">{{ errors.age }}</text>
        </view>
        <view class="form-item">
          <text class="label">性别<text class="required">*</text></text>
          <view class="radio-group">
            <view class="radio-item">
              <radio value="male" :checked="formData.gender === 'male'" @click="formData.gender = 'male'" />
              <text class="radio-text">男</text>
            </view>
            <view class="radio-item">
              <radio value="female" :checked="formData.gender === 'female'" @click="formData.gender = 'female'" />
              <text class="radio-text">女</text>
            </view>
          </view>
        </view>
        <view class="form-item">
          <text class="label">健康状况<text class="required">*</text></text>
          <picker
            :value="healthIndex"
            :range="healthOptions"
            @change="onHealthChange"
            class="picker"
          >
            <view class="picker-text">{{ healthOptions[healthIndex] }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">密码<text class="required">*</text></text>
          <view class="password-container">
            <input
              v-model="formData.password"
              class="input password-input"
              :type="showPassword ? 'text' : 'password'"
              placeholder="请输入密码"
              @blur="validatePassword"
            />
            <uni-icons
              :type="showPassword ? 'eye-filled' : 'eye-slash-filled'"
              size="20"
              @click="togglePassword"
              class="password-icon"
            />
          </view>
          <text v-if="errors.password" class="error-text">{{ errors.password }}</text>
        </view>
        <view class="form-item">
          <text class="label">简历上传<text class="required">*</text></text>
          <uni-button class="upload-btn" @click="chooseFile">
            <uni-icons type="upload" size="16" />
            <text class="upload-text">{{ uploadText }}</text>
          </uni-button>
          <text class="tip-text">支持 Word、PDF 格式，大小不超过10MB</text>
          <text v-if="errors.resume" class="error-text">{{ errors.resume }}</text>
        </view>
        <view class="form-item">
          <text class="label">荣誉信息</text>
          <textarea
            v-model="formData.honors"
            class="textarea"
            placeholder="请输入您获得的荣誉信息"
          />
        </view>
        <view class="agreement">
          <checkbox
            :checked="formData.agreed"
            @click="formData.agreed = !formData.agreed"
            class="checkbox"
          />
          <text class="agreement-text">
            我已阅读并同意
            <text class="link" @click="openPrivacy">《隐私政策》</text>
          </text>
        </view>
        <uni-button
          type="primary"
          class="submit-btn"
          :disabled="!canSubmit"
          @click="handleSubmit"
        >
          注册
        </uni-button>
        <view class="login-link">
          <text>已有账号？</text>
          <text class="link" @click="goToLogin">立即登录</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { request, uploadFile } from '@/utiles/request';

const formData = ref({
  name: '',
  phone: '',
  email: '',
  age: '',
  gender: 'male',
  health: '健康',
  password: '',
  resume: null as any,
  honors: '',
  agreed: false
});

const errors = ref({
  name: '',
  phone: '',
  email: '',
  age: '',
  password: '',
  resume: ''
});

const healthOptions = ['健康', '良好', '体弱', '残疾'];
const healthIndex = ref(0);
const showPassword = ref(false);
const uploadText = ref('点击上传文件');

const canSubmit = computed(() => {
  return formData.value.name &&
    formData.value.phone &&
    formData.value.email &&
    formData.value.age &&
    formData.value.password &&
    formData.value.resume &&
    formData.value.agreed;
});

const validateName = () => {
  if (!formData.value.name) {
    errors.value.name = '请输入姓名';
  } else {
    errors.value.name = '';
  }
};

const validatePhone = () => {
  const phoneReg = /^1[3-9]\d{9}$/;
  if (!formData.value.phone) {
    errors.value.phone = '请输入手机号';
  } else if (!phoneReg.test(formData.value.phone)) {
    errors.value.phone = '请输入正确的手机号';
  } else {
    errors.value.phone = '';
  }
};

const validateEmail = () => {
  const emailReg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!formData.value.email) {
    errors.value.email = '请输入邮箱';
  } else if (!emailReg.test(formData.value.email)) {
    errors.value.email = '请输入正确的邮箱格式';
  } else {
    errors.value.email = '';
  }
};

const validateAge = () => {
  const age = Number(formData.value.age);
  if (!formData.value.age) {
    errors.value.age = '请输入年龄';
  } else if (age < 18 || age > 60) {
    errors.value.age = '年龄必须在18-60岁之间';
  } else {
    errors.value.age = '';
  }
};

const validatePassword = () => {
  if (!formData.value.password) {
    errors.value.password = '请输入密码';
  } else if (formData.value.password.length < 6) {
    errors.value.password = '密码长度不能少于6位';
  } else {
    errors.value.password = '';
  }
};

const togglePassword = () => {
  showPassword.value = !showPassword.value;
};

const onHealthChange = (e: any) => {
  healthIndex.value = e.detail.value;
  formData.value.health = healthOptions[healthIndex.value];
};

const chooseFile = () => {
  uni.chooseFile({
    count: 1,
    type: 'file',
    extension: ['.doc', '.docx', '.pdf'],
    success: (res) => {
      const file = res.tempFiles[0];
      if (file.size > 10 * 1024 * 1024) {
        errors.value.resume = '文件大小不能超过10MB';
        return;
      }
      uploadFile({
        url: '/admin/api/user/upload-resume',
        filePath: file.path,
        name: 'file',
      }).then(uploadRes => {
        const result = JSON.parse(uploadRes.data);
		console.log(result)
        if (result.code === 200) {
          formData.value.resume = result.data.url;
          uploadText.value = file.name;
          errors.value.resume = '';
        } else {
          errors.value.resume = '简历上传失败';
        }
      }).catch(() => {
        errors.value.resume = '简历上传失败';
      });
    }
  });
};

const handleSubmit = () => {
  if (!canSubmit.value) return;
  uni.showLoading({
    title: '提交中...'
  });
  console.log(formData.value)
  request({
    url: '/admin/api/user/register',
    method: 'POST',
    data: {
      name: formData.value.name,
      phone: formData.value.phone,
      email: formData.value.email,
      password: formData.value.password,
      gender: formData.value.gender,
      age: Number(formData.value.age),
      health: formData.value.health,
      honors: formData.value.honors,
      resume: formData.value.resume
    }
  }).then(res => {
    uni.hideLoading();
    if (res.data && res.data.code === 200) {
      uni.showToast({
        title: '注册成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }, 1200);
    } else {
      uni.showToast({
        title: res.data?.msg || '注册失败',
        icon: 'none'
      });
    }
  }).catch(() => {
    uni.hideLoading();
    uni.showToast({
      title: '网络错误',
      icon: 'none'
    });
  });
};

const goBack = () => {
  uni.navigateBack();
};

const openPrivacy = () => {
  // 打开隐私政策页面
  uni.showToast({
    title: '打开隐私政策',
    icon: 'none'
  });
};

const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login'
  });
};
</script>

<style>
page {
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #E3F2FD 0%, #BBDEFB 100%);
  display: flex;
  flex-direction: column;
}

.header {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  background-color: #FFFFFF;
  flex-shrink: 0;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.logo-icon {
  width: 24px;
  height: 24px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.content {
  flex: 1;
  overflow: auto;
}

.form-container {
  width: 85%;
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 24rpx;
  margin: 32rpx auto;
}

.form-item {
  margin-bottom: 32rpx;
}

.label {
  display: block;
  font-size: 14px;
  color: #333333;
  margin-bottom: 16rpx;
}

.required {
  color: #FF4D4F;
  margin-left: 8rpx;
}

.input {
  width: 95%;
  height: 88rpx;
  background: #F5F5F5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 14px;
  color: #333333;
}

.password-container {
  position: relative;
}

.password-icon {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

.radio-group {
  display: flex;
  gap: 64rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.radio-text {
  font-size: 14px;
  color: #333333;
}

.picker {
  width: 95%;
  height: 88rpx;
  background: #F5F5F5;
  border-radius: 8rpx;
  padding: 0 24rpx;
}

.picker-text {
  line-height: 88rpx;
  font-size: 14px;
  color: #333333;
}

.upload-btn {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  background: #F5F5F5;
  border: 1px dashed #D9D9D9;
  margin: 0;
}

.upload-text {
  font-size: 14px;
  color: #666666;
}

.tip-text {
  display: block;
  font-size: 12px;
  color: #999999;
  margin-top: 8rpx;
}

.textarea {
  width: 95%;
  height: 160rpx;
  background: #F5F5F5;
  border-radius: 8rpx;
  padding: 24rpx;
  font-size: 14px;
  color: #333333;
}

.error-text {
  display: block;
  font-size: 12px;
  color: #FF4D4F;
  margin-top: 8rpx;
}

.agreement {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 32rpx;
}

.checkbox {
  transform: scale(0.8);
}

.agreement-text {
  font-size: 14px;
  color: #666666;
}

.link {
  color: #1890FF;
}

.submit-btn {
  width: 95%;
  height: 88rpx;
  background: linear-gradient(135deg, #1890FF 0%, #096DD9 100%);
  border-radius: 44rpx;
  font-size: 18px;
  color: #fff;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.18);
  font-weight: bold;
  letter-spacing: 2rpx;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  border: none;
}

.submit-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2rpx 6rpx rgba(24, 144, 255, 0.12);
}

/deep/ .submit-btn[disabled], .submit-btn[disabled] {
  background: linear-gradient(135deg, #e0e0e0 0%, #bdbdbd 100%) !important;
  color: #b0b0b0 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

.login-link {
  text-align: center;
  margin-top: 32rpx;
  font-size: 14px;
  color: #666666;
}

.login-link .link {
  color: #1890FF;
  margin-left: 8rpx;
  font-weight: 500;
}
</style>
